<template>
  <custom-modal-page :visible.sync="visible">
    <div class="tensioning-detail-container">
      <div class="header" header="鱼雷罐详情">
        <a-button @click="closeModal()"> 返回 </a-button>
      </div>
      <div class="main" v-loading="loading">
        <TableView>
          <template slot-scope="{ width, height }">
            <a-table
              :data-source="tableData"
              rowKey="id"
              :scroll="{ x: width, y: height }"
              :columns="tableColumns"
              :pagination="pager"
              @change="paginationChange"
            >
              <template
                v-for="col in tableColumns"
                :slot="col.scopedSlots.customRender"
                slot-scope="text, record"
              >
                <div
                  v-for="(item, index) in record[col.scopedSlots.customRender]"
                  :key="index"
                  class="table-row-text"
                >
                  {{ item }}
                </div>
              </template>
            </a-table>
          </template>
        </TableView>
      </div>
    </div>
  </custom-modal-page>
</template>

<script>
import { getField } from "@/api/common";
import { getMaterialTableData } from "@/api/wisdom-beam/collect-app";
import paginationMixins from "@/mixins/pagination";
import TableView from "@/components/tableView";
import { _getUUID } from "@/utils";
export default {
  mixins: [paginationMixins],
  components: {
    TableView,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: true,
      tableColumns: [],
      tableData: [],
    };
  },
  methods: {
    //监听分页
    paginationChange(pagination) {
      let { current, pageSize } = pagination;
      this.pager.pageSize = pageSize;
      this.pager.page = current;
      this.getTableData();
    },
    //查询相关数据
    getData() {
      this.loading = true;
      Promise.all([this.getFieldData(), this.getTableData()])
        .then((result) => {
          this.tableColumns = [];
          let [columns, table] = result;
          columns.forEach((col) => {
            if (this.checkHasData(col.dataIndex, table)) {
              this.tableColumns.push(col);
            }
          });
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    checkHasData(key = "", data = []) {
      return data
        .map((v) => v[key])
        .flat()
        .some((v) => v != 0);
    },

    //查询字段列表
    getFieldData() {
      this.loading = true;
      this.tableColumns = [];
      return new Promise((resolve, reject) => {
        let { equCode } = this.row;
        getField({
          equCode: equCode,
          flag: "0",
        })
          .then((res) => {
            let cdata = [
              {
                title: "拌和站名称",
                dataIndex: "equName",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "equName" },
              },
              {
                title: "生产时间",
                dataIndex: "dischargeTime",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "dischargeTime" },
              },
              {
                title: "浇筑部位",
                dataIndex: "placePart",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "placePart" },
              },
              {
                title: "强度等级",
                dataIndex: "strengthGrade",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "strengthGrade" },
              },
              {
                title: "搅拌时间(s)",
                dataIndex: "stirTime",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "stirTime" },
              },
              //   {
              //     title: "方量(m³)",
              //     dataIndex: "volume",
              //     key: _getUUID(32, 32),
              //     width: 150,
              //     scopedSlots: { customRender: "volume" },
              //   },
              {
                title: "类型",
                dataIndex: "typeName",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "typeName" },
              },
            ];
            res.data.result.forEach((item) => {
              cdata.push({
                title: item.equFieldName,
                dataIndex: item.equFieldDtu,
                key: _getUUID(32, 32),
                width: 100,
                scopedSlots: { customRender: item.equFieldDtu },
              });
            });
            resolve(cdata);
          })
          .catch((_) => {
            this.tableColumns = [];
            reject();
          });
      });
    },

    //查询表格数据
    getTableData() {
      return new Promise((resolve, reject) => {
        let { page, pageSize } = this.pager;
        let { componentParts, startTime, endTime } = this.row;
        getMaterialTableData({
          startTime: startTime,
          endTime: endTime,
          placePart: componentParts,
          page,
          pageSize,
        })
          .then((res) => {
            this.pager.total = res.data.result.data.total;
            this.tableData = res.data.result.data.records;
            resolve(this.tableData);
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          });
      });
    },

    //返回
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.tensioning-detail-container {
  height: 100%;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 15px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
  }
  .pager-container {
    flex-shrink: 0;
  }
}
</style>
